<template>
  <div class="source-card">
    <div class="source-card-wrap">
      <div v-for="item in data" :key="item.id" @click="handleOpen(item)" class="source-card-item">
        <a-dropdown :trigger="['contextmenu']">
          <div @dblclick="handleOpen(item, 'open')" class="source-card-item-wrap">
            <svg-icon class="source-card-item-icon" :icon-class="fileSetting.getIcon(item.fileType)"></svg-icon>
            <div class="source-card-item-name tc-ellipsis" :title="item.fileName">{{ item.fileName }}</div>
          </div>
          <template #overlay>
            <a-menu>
              <a-menu-item @click="handleOpen(item, 'view')" v-if="item.fileCategory === 1" key="1">
                <div class="tc-padding-r60">预览</div>
              </a-menu-item>
              <a-menu-item @click="handleOpen(item, 'download')" v-if="item.fileCategory === 1" key="2">下载</a-menu-item>
              <a-menu-item @click="handleOpen(item, 'rename')" key="3">重命名</a-menu-item>
              <a-menu-item @click="handleOpen(item, 'move')" key="4">移动</a-menu-item>
              <a-menu-item @click="handleOpen(item, 'delete')" key="5">删除</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup name="SourceCard">
import fileSetting from "@/views/sources/dirs/config/config.js";
import SvgIcon from "@/components/SvgIcon/index.vue";

const props = defineProps({
  title: String,
  data: Array,
})

const emit = defineEmits(['modify'])

const {data} = toRefs(props);

const handleOpen = (row, type) => {
  emit('modify', row, type);
}
</script>

<style lang="scss" scoped>
.source-card {
  user-select: none;
  overflow: auto;

  &-wrap {
    display: flex;
    flex-flow: wrap;
  }

  &-item {
    cursor: pointer;
    margin: 0 16px 16px 0;
    padding: 20px;
    border-radius: 6px;
    width: 100px;
    // background-color: #ffffff;

    &-wrap {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
    }

    &-icon {
      width: 50px;
      height: 50px;
    }

    &-name {
      font-size: 14px;
      line-height: 20px;
      margin-top: 8px;
      max-width: 80px;
    }

  }

}
</style>

